<!--
 * @Date: 2024-02-28 15:28:23
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2024-03-11 13:41:29
 * @FilePath: \ztc-web\src\views\statement\index.vue
-->
<template>
  <div style="padding: 20px">
    <el-card class="box-card">
      <div class="top-content">
        <div class="content">
          <img src="./img/yj.7aef8788.png" />
          <div class="content-wrapper">
            <p>{{ objCount.warningCount }}</p>
            <p>累计预警事件总数</p>
          </div>
        </div>

        <div class="content">
          <img src="./img/yyp.5729e49f.png" />
          <div class="content-wrapper">
            <p>{{ objCount.ypyCount }}</p>
            <p>累积已研判总数</p>
          </div>
        </div>
        <div class="content">
          <img src="./img/wyp.6cb0c303.png" />
          <div class="content-wrapper">
            <p>{{ objCount.wpyCount }}</p>
            <p>累计未研判总数</p>
          </div>
        </div>
        <div class="content">
          <img src="./img/yx.18f91951.png" />
          <div class="content-wrapper">
            <p>{{ objCount.yxCount }}</p>
            <p>累计有效事件总数</p>
          </div>
        </div>
        <div @click="handleClick" class="content" style="cursor: pointer">
          <img src="./img/wx.2a6c27d6.png" />
          <div class="content-wrapper">
            <p>{{ objCount.wxCount }}</p>
            <p>累计无效事件总数</p>
          </div>
        </div>
      </div>

      <div style="display: flex; justify-content: space-between">
        <el-form
          :inline="true"
          ref="ruleFormRefGps"
          :model="form"
          class="demo-form-inline"
        >
          <el-form-item prop="time">
            <el-date-picker
              v-model="state.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item prop="eventTypeId">
            <el-select
              v-model="form.eventTypeId"
              @change="handleChangeType"
              placeholder="请选择类型"
            >
              <el-option
                v-for="(item, index) in event_typeid"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button style="height: 30px" type="primary" @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <el-button @click="handleExcel" type="primary">导出Excel</el-button>
        </div>
      </div>
      <chartBar v-if="form" :form="form"></chartBar>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" fixed label="序号" width="62" />

        <el-table-column
          prop="deptName"
          label="行政区域名称"
          fixed
          width="150"
        />
        <el-table-column prop="pointSum" label="点位总数" width="150" />
        <el-table-column label="累计全部事件(单位：件)">
          <el-table-column
            prop="allCount"
            label="累计全部事件数量"
            width="120"
          />

          <el-table-column label="已研判">
            <el-table-column prop="ypyCount" label="已研判数量" width="120" />
            <el-table-column label="其中：有效事件">
              <el-table-column prop="wjaCount" label="未结案总额" width="120" />
              <el-table-column prop="yjaCount" label="已结案总额" />
              <el-table-column prop="yxCount" label="总数" width="120" />
            </el-table-column>
            <el-table-column
              prop="wxCount"
              label="其中：无效事件"
              width="120"
            />
          </el-table-column>
          <el-table-column prop="wpyCount" label="待研判数量" width="120" />
        </el-table-column>
        <el-table-column label="累计本区全部事件(单位：件)">
          <el-table-column
            prop="localAllCount"
            label="累计本区事件数量"
            width="120"
          />

          <el-table-column label="已研判">
            <el-table-column
              prop="localypyCount"
              label="已研判数量"
              width="120"
            />
            <el-table-column label="其中：有效事件">
              <el-table-column
                prop="localwjaCount"
                label="未结案总额"
                width="120"
              />
              <el-table-column prop="localyjaCount" label="已结案总额" />
              <el-table-column prop="localyxCount" label="总数" width="120" />
            </el-table-column>
            <el-table-column
              prop="localwxCount"
              label="其中：无效事件"
              width="120"
            />
          </el-table-column>
          <el-table-column
            prop="localwpyCount"
            label="待研判数量"
            width="120"
          />
        </el-table-column>

        <el-table-column label="累计本区转出事件(单位：件)">
          <el-table-column
            prop="outAllCount"
            label="累计本区转出事件数量"
            width="120"
          />

          <el-table-column label="已研判">
            <el-table-column
              prop="outypyCount"
              label="已研判数量"
              width="120"
            />
            <el-table-column label="其中：有效事件">
              <el-table-column
                prop="outwjaCount"
                label="未结案总额"
                width="120"
              />
              <el-table-column prop="outyjaCount" label="已结案总额" />
              <el-table-column prop="outyxCount" label="总数" width="120" />
            </el-table-column>
            <el-table-column
              prop="outwxCount"
              label="其中：无效事件"
              width="120"
            />
          </el-table-column>

          <el-table-column prop="outwpyCount" label="待研判数量" width="120" />
        </el-table-column>
        <el-table-column label="累计外区转入事件(单位：件)">
          <el-table-column
            prop="areInAllCount"
            label="累计外区转入事件数量"
            width="120"
          />

          <el-table-column label="已研判">
            <el-table-column
              prop="areInypyCountstate"
              label="已研判数量"
              width="120"
            />
            <el-table-column label="其中：有效事件">
              <el-table-column
                prop="areInwjaCount"
                label="未结案总额"
                width="120"
              />
              <el-table-column prop="areInyjaCount" label="已结案总额" />
              <el-table-column prop="areInyxCount" label="总数" width="120" />
            </el-table-column>
            <el-table-column
              prop="areInwxCount"
              label="其中：无效事件"
              width="120"
            />
          </el-table-column>
          <el-table-column
            prop="areInwpyCount"
            label="待研判数量"
            width="120"
          />
        </el-table-column>
      </el-table>
    </el-card>

    <el-card v-if="!isAdmin" style="margin-top: 26px">
      <el-table border :data="towData" style="width: 100%">
        <el-table-column type="index" fixed label="序号" width="62" />

        <el-table-column prop="deptName" label="行政区域名称" />
        <el-table-column prop="yjaCount" label="已结案事件总数" />
        <el-table-column prop="wjaCount" label="未结案事件总数" />
        <el-table-column prop="thCount" label="退回事件总数" />
        <el-table-column prop="allCount" label="总数" width="150" />
      </el-table>
    </el-card>
    <ContentDialog v-model="showDialog" :data="cellData" />
  </div>
</template>

<script setup>
import { eventStatisticalAnalysis, townStreet } from "@/api/statement/index";

import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

const isAdmin = userStore.admin;
import ContentDialog from "./contentDialog.vue";
import chartBar from "./chartBar.vue";

import { ref, reactive } from "vue";

const tableData = ref([]);
const objCount = ref({});
const towData = ref([]);
const showDialog = ref(false);
const cellData = ref([]);
const form = ref({
  beginTime: "",
  eventTypeId: "",
  endTime: "",
});
const state = reactive({
  time: "",
});
const { proxy } = getCurrentInstance();
const { event_typeid } = proxy.useDict("event_typeid");
const getData = () => {
  eventStatisticalAnalysis({ ...form.value }).then((res) => {
    objCount.value = res.data.top;
    tableData.value = res.data.list.map((item) => {
      return {
        ...item.allEvent,
        areInAllCount: item.inEvent.allCount,
        areInwjaCount: item.inEvent.wjaCount,
        areInwpyCount: item.inEvent.wpyCount,
        areInwxCount: item.inEvent.wxCount,
        areInyjaCount: item.inEvent.yjaCount,
        areInypyCount: item.inEvent.ypyCount,
        areInyxCount: item.inEvent.yxCount,

        localAllCount: item.localEvent.allCount,
        localwjaCount: item.localEvent.wjaCount,
        localwpyCount: item.localEvent.wpyCount,
        localwxCount: item.localEvent.wxCount,
        localyjaCount: item.localEvent.yjaCount,
        localypyCount: item.localEvent.ypyCount,
        localyxCount: item.localEvent.yxCount,

        outAllCount: item.outEvent.allCount,
        outwjaCount: item.outEvent.wjaCount,
        outwpyCount: item.outEvent.wpyCount,
        outwxCount: item.outEvent.wxCount,
        outyjaCount: item.outEvent.yjaCount,
        outypyCount: item.outEvent.ypyCount,
        outyxCount: item.outEvent.yxCount,
        ...item.pointsCount,
        deptName: item.deptName,
        areaNo: item.areaNo,
      };
    });
  });
};
const handleClick = () => {
  showDialog.value = true;
};
const getTownStreet = () => {
  townStreet().then((res) => {
    towData.value = res.data;
  });
};

const handleChangeType = (value) => {
  getData();
};
const onSubmit = () => {
  console.log(state);
  if (state.time) {
    form.value.beginTime = state.time[0];
    form.value.endTime = state.time[1];
  } else {
    form.value.beginTime = "";
    form.value.endTime = "";
  }

  getData();
};
const handleExcel = () => {
  proxy.getDownload(
    "business/event/export",
    { ...form.value },
    `dict_${new Date().getTime()}.xlsx`
  );
};
getData();
getTownStreet();
</script>

<style lang="scss" scoped>
.top-content {
  margin-bottom: 26px;
  display: flex;
  justify-content: space-between;
}
.content {
  position: relative;
  width: calc(20% - 19.2px);
  img {
    width: 100%;
  }
}
.content-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
  color: #fff;

  p {
    margin: 0;
    line-height: 1.5175;
  }
  p:nth-child(1) {
    font-size: 45px;
  }
  p:nth-child(2) {
    font-size: 18px;
  }
}
</style>
